<template>
  <div class="entrance_node_edit">
    <!--顶部保存和删除按钮-->
    <div class="btn_box">
      <el-button type="primary" class="primary_btn" @click="saveEdit">{{$t('public.save')}}</el-button>
    </div>
    <el-form :model="nodeObj" label-width="170px" ref="nodeObj" :rules="rules">
      <!--节点名称-->
      <el-form-item class="form_li" prop="name"  :label="$t('configLazyLoad.process.nodeName')">
        <el-input :maxlength="30" v-model.trim="nodeObj.name" class="input_box"></el-input>
      </el-form-item>
      <!-- 添加节点时，渠道类型选择 -->
      <el-form-item class="form_li" v-show="!nodeObj._id" prop="accessType" :label="$t('configLazyLoad.process.processLabel51')">
        <el-radio-group v-model="nodeObj.accessType" @change="accessTypeChange">
          <el-radio label="common">{{$t('configLazyLoad.process.processLabel52')}}</el-radio>
          <el-radio label="wechat">{{$t('monitor.weixin')}}</el-radio>
          <el-radio label="weibo">{{$t('monitor.weibo')}}</el-radio>
          <el-radio label="sdk">{{$t('monitor.appYiDong')}}</el-radio>
          <el-radio label="wxmini">{{$t('webchat.weChatMini')}}</el-radio>
          <!-- <el-radio label="wxenterprise">{{$t('webchat.enterpriseShot')}}</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <!-- 修改节点时，渠道类型展示 -->
      <el-form-item class="form_li" v-show="nodeObj._id" :label="$t('configLazyLoad.process.processLabel51')">
        <div class="node_accessType_box">
          <span v-if="nodeObj.accessType === 'common'">{{$t('configLazyLoad.process.processLabel52')}}</span>
          <span v-if="nodeObj.accessType === 'wechat'">{{$t('monitor.weixin')}}</span>
          <span v-if="nodeObj.accessType === 'weibo'">{{$t('monitor.weibo')}}</span>
          <span v-if="nodeObj.accessType === 'sdk'">{{$t('monitor.appYiDong')}}</span>
          <span v-if="nodeObj.accessType === 'wxmini'">{{$t('webchat.weChatMini')}}</span>
          <!-- <span v-if="nodeObj.accessType === 'wxenterprise'">{{$t('webchat.enterpriseShot')}}</span> -->
        </div>
      </el-form-item>
      <!-- 微信，微博，小程序渠道类型节点设置 -->
      <div v-if="nodeObj.accessType === 'wechat' || nodeObj.accessType === 'weibo' || nodeObj.accessType === 'wxmini' ">
        <!-- 是否启用多入口分流 -->
        <el-form-item class="form_li" label-width="170px"  prop="keyWordTransfer" :label="$t('configLazyLoad.process.processLabel53')">
          <el-radio-group v-model="nodeObj.keyWordTransfer">
            <el-radio :label="true">{{$t('public.yes')}} <span class="remark">{{$t('configLazyLoad.process.processLabel54')}}</span></el-radio>
            <el-radio :label="false">{{$t('public.no')}} <span class="remark">{{$t('configLazyLoad.process.processLabel55')}}</span></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 启用命中关键词流转功能 -->
        <div v-if="nodeObj.keyWordTransfer">
          <!-- 多入口引导文案 -->
          <el-form-item class="form_li " label-width="170px"  prop="keyWordGuide" :label="$t('configLazyLoad.process.processLabel56')">
            <el-input type="textarea" :resize="'none'" :maxlength="150" v-model="nodeObj.keyWordGuide" :rows="3" :placeholder="$t('configLazyLoad.process.processLabel57')"></el-input>
            <span class="prompit">{{$t('configLazyLoad.process.processLabel58')}}</span>
            <el-tooltip v-if="nodeObj.accessType === 'wechat' || nodeObj.accessType === 'wxmini' " popper-class="entrance_node_tooltip" class="example_tip" effect="dark" placement="right">
              <img slot="content" src="./img/entrance_example.png" alt="" style="max-width: 20em"/>
              <span class="example">{{$t('configLazyLoad.process.processLabel59')}}</span>
            </el-tooltip>
            <el-tooltip v-if="nodeObj.accessType === 'weibo'" popper-class="entrance_node_tooltip" class="example_tip" effect="dark" placement="right">
              <img slot="content" src="./img/weibo_example.png" alt="" style="max-width: 20em"/>
              <span class="example">{{$t('configLazyLoad.process.processLabel59')}}</span>
            </el-tooltip>
          </el-form-item>
          <!-- 关键词分流展示区 -->
          <div class="key_words_box">
            <!-- 添加入口按钮 -->
            <div class="add_btn" @click="addKeyWords"><i class="iconfont icon-zhankai"></i>{{$t('configLazyLoad.process.processLabel60')}}</div>
            <span class="remark">{{$t('configLazyLoad.process.processLabel61')}}</span>
            <!-- 关键词分流 -->
            <el-form-item v-for="(domain, index) in nodeObj.keyWords" label-width="0px" class="el_form_key_words">
              <el-col :span="20">
                <!-- 命中关键词 -->
                <el-form-item class="key_words_item" :prop="'keyWords.' + index + '.keyWordValue'" :label="$t('configLazyLoad.process.processLabel62')" :rules="{required: true, message: $t('configLazyLoad.process.processLabel63'), trigger: 'blur'}">
                  <el-input v-model="domain.keyWordValue" class="key_word_li_input" :placeholder="index === 0 ? $t('configLazyLoad.process.processLabel88') : ''"></el-input>
                </el-form-item>
                <!-- 流转 -->
                <el-form-item class="key_words_item" label-width="80px" :label="$t('configLazyLoad.process.processLabel64')" >
                  <nodeSelect
                          @oneChange="wxSelectChangeOne"
                          :nodeType="domain.processType"
                          :index="''+ index"
                          @twoChange="wxSelectChangeTwo"
                          :transRoute="showTransRoute"
                          :contentId="nodeObj._id"
                          :nodeLi="domain.processTo"></nodeSelect>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <div class="key_word_delete_btn" @click="deleteKeyWord(index)">{{$t('public.delete')}}</div>
              </el-col>
            </el-form-item>
          </div>
          <!-- 访客无响应结束会话时长 -->
          <el-form-item class="form_li" label-width="170px" prop="disTime" :label="$t('configLazyLoad.process.processLabel65')">
            <el-input v-model="nodeObj.disTime" :maxlength="3" class="input_time_box"></el-input>
            <span class="font_small">{{$t('configLazyLoad.process.processLabel66')}}</span>
            <span class="remark">{{$t('configLazyLoad.process.processLabel67')}}</span>
          </el-form-item>
          <!-- 结束提示内容 -->
          <el-form-item class="form_li" label-width="170px"  prop="disPromptCon" :label="$t('configLazyLoad.process.processLabel68')">
            <el-input type="textarea" v-model="nodeObj.disPromptCon" :resize="'none'" :placeholder="$t('configLazyLoad.process.processLabel69')"></el-input>
          </el-form-item>
        </div>
        <!-- 没有启用命中关键词流转功能 -->
        <el-form-item v-if="!nodeObj.keyWordTransfer" class="form_li" :label="$t('configLazyLoad.process.processLabel70')">
          <nodeSelect
                  @oneChange="onChangeTwo"
                  onePath="processType"
                  :nodeType="nodeObj.processType"
                  @twoChange="onChangeTwo"
                  :transRoute="showTransRoute"
                  twoPath="processTo"
                  :contentId="nodeObj._id"
                  :nodeLi="nodeObj.processTo"
          ></nodeSelect>
        </el-form-item>
        <!-- 结束会话类别设定   微信、微博、小程序渠道使用 -->
        <el-form-item v-if="nodeObj.keyWordTransfer" class="form_li" :label="$t('configLazyLoad.process.processLabel71')">
          <!-- <el-select size="mini" v-model="nodeObj.autoCloseSessionType" @change="autoCloseChange" :placeholder="$t('public.pleasePick')" class="width-full">
            <el-option
                    v-for="item in autoCloseOptions"
                    :value="item.key"
                    :label="item.label">
            </el-option>
          </el-select> -->
          <el-cascader
            class="width-full"
            popper-class="webchat-finish"
            :clearable="true"
            :placeholder="$t('webchat.chooseEndSessionType')"
            :options="autoCloseOptions"
            filterable
            @change="fastOffCloseFun"
            v-model="activeFastOff">
        </el-cascader>
        </el-form-item>
        </br>
        <!-- 机器人辅助座席 微信、微博、小程序渠道使用 有机器人列表的时候才会展示 -->
        <el-form-item v-if="aiRobots.length > 0"  :label="$t('configLazyLoad.process.processLabel72')" prop="robotAssistId">
          <el-select size="mini" v-model.trim="nodeObj.robotAssistId" :placeholder="$t('public.pleasePick')" @visible-change="robotSelectShow">
            <el-option value="">{{$t('public.pleasePick')}}</el-option>
            <el-option
                    v-for="item in aiRobots"
                    :key="item._id"
                    :label="item.robot_type"
                    :disabled="item.disabled"
                    :value="item._id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 推送欢迎语   微信、微博、小程序渠道使用 -->
        <el-form-item class="form_li" :label="$t('configLazyLoad.process.processLabel73')">
          <welcomeSelect
                  @changeOption="welcomeChange"
                  :welcomeNodeId = 'nodeObj.welcomeNodeId'>
          </welcomeSelect>
        </el-form-item>
      </div>
      <!-- 网站/H5/wap渠道入口设置 -->
      <div v-if="nodeObj.accessType === 'common'">
        <affix :label="$t('configLazyLoad.process.processLabel74')"></affix>
        <!--设置在线咨询按钮样式-->
        <div class="webchat_btn_css" >
          <el-row>
            <el-col :span="13">
              <div class="grid-content bg-purple">
                <div class="box">
                  <div class="kf bottom_btn" :style="btnStyle" v-show="place === 'bottom' && showBtn">
                    <span class="iconfont" :class="nodeObj.buttonStyle.icon"></span>
                    <span>{{nodeObj.buttonStyle.text}}</span>
                  </div>
                  <div class="kf side_btn" :style="btnStyle" v-show="place === 'side' && showBtn">
                    <span class="iconfont" :class="nodeObj.buttonStyle.icon"></span>
                    <span>{{nodeObj.buttonStyle.text}}</span>
                  </div>
                  <div class="kf circle_btn" :style="btnStyle" v-show="place === 'circle' && showBtn">
                    <span class="iconfont" :class="nodeObj.buttonStyle.icon"></span>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <affix :label="$t('configLazyLoad.process.processLabel75')"></affix>
              <el-row class="config"  v-show="isShowBtnText">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel76')}}</el-col>
                <el-col :span="12">
                  <el-input v-model="nodeObj.buttonStyle.text" @blur = "onlineTextBlur"></el-input>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel77')}}</el-col>
                <el-col :span="12">
                  <div class="btnSty">
                    <span v-for="(icon,index) in icons" class="iconfont" @click= "choseIcon(index)" :class="[nodeObj.buttonStyle.iconType === index + 1 ? 'span-back' : '', icon]"></span>
                  </div>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel78')}}</el-col>
                <el-col :span="12">
                  <el-select size="mini" v-model="nodeObj.buttonStyle.location">
                    <el-option
                      v-for="item in btnOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <el-row class="config" v-show="place !== 'side'">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel79')}}</el-col>
                <el-col :span="12">
                  <el-input v-model.trim="nodeObj.buttonStyle.sideMargin" type="number" min="0" :placeholder="$t('public.pleaseEnter')" max="999" @blur="blurMar('btnSideMar')">
                    <template slot="append">{{$t('configLazyLoad.process.processLabel80')}}</template>
                  </el-input>
                </el-col>
              </el-row>
              <el-row class="config" v-show="place !== 'bottom'">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel81')}}</el-col>
                <el-col :span="12">
                  <el-input v-model.trim="nodeObj.buttonStyle.bottomMargin" type="number" min="0" max="500"  :placeholder="$t('public.pleaseEnter')" @blur="blurMar('btnBotMar')">
                    <template slot="append">{{$t('configLazyLoad.process.processLabel80')}}</template>
                  </el-input>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <affix style="margin-top: 25px" :label="$t('configLazyLoad.process.processLabel89')"></affix>
              <el-row class="config">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel90')}}</el-col>
                <el-col :span="12">
                  <div class="btnSty">
                    <span v-for="(icon,index) in icons" class="iconfont" @click= "choseMobileIcon(index)" :class="[nodeObj.buttonStyle.mobileIconType === index + 1 ? 'span-back' : '', icon]"></span>
                  </div>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel91')}}</el-col>
                <el-col :span="12">
                  <el-select size="mini" v-model="nodeObj.buttonStyle.mobileLocation">
                    <el-option
                      v-for="item in mobileBtnOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <el-row class="config" v-show="nodeObj.buttonStyle.mobileLocation === 'circle-left' || nodeObj.buttonStyle.mobileLocation === 'circle-right'">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel79')}}</el-col>
                <el-col :span="12">
                  <el-input v-model.trim="nodeObj.buttonStyle.mobileSideMargin" type="number" min="0" :placeholder="$t('public.pleaseEnter')" max="999">
                    <template slot="append">{{$t('configLazyLoad.process.processLabel80')}}</template>
                  </el-input>
                </el-col>
              </el-row>
              <el-row class="config" v-show="nodeObj.buttonStyle.mobileLocation === 'circle-left' || nodeObj.buttonStyle.mobileLocation === 'circle-right'">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel81')}}</el-col>
                <el-col :span="12">
                  <el-input v-model.trim="nodeObj.buttonStyle.mobileBottomMargin" type="number" min="0" max="500"  :placeholder="$t('public.pleaseEnter')">
                    <template slot="append">{{$t('configLazyLoad.process.processLabel80')}}</template>
                  </el-input>
                </el-col>
              </el-row>
              <el-row class="config"  v-show="nodeObj.buttonStyle.mobileLocation === 'bottom'">
                <el-col :span="12">{{$t('configLazyLoad.process.processLabel82')}}</el-col>
                <el-col :span="12">
                  <el-input v-model="nodeObj.buttonStyle.mobileText"></el-input>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <!--设置技能组入口-->
        <div class="webchat_entrance_group">
          <el-row class="config">
            <!--左侧样式-->
            <el-col :span="8">
              <div class="entrance_show">
                <div class="head">{{$t('configLazyLoad.process.processLabel83')}}</div>
                <div class="body">
                  <!--一级技能组-->
                  <div class="entrance_li_btn " v-for="(entrance, index) in nodeObj.entrances">
                    <div class="entrance_li_title entrance_li">
                      <span class="ellipsis entrance_li_tit_span">{{entrance.name}}</span>
                      <span class="iconfont icon-shanchu" @click="deleteEntranceBtn('', index)"></span>
                      <span class="iconfont icon-zhankai" v-show="nodeObj.accessType === 'common'" @click="addEntrance('li', index)"></span>
                    </div>
                    <!--二级技能组-->
                    <div class="entrance_li_title entrance_li" v-for="(children, num) in entrance.children">
                      <span class="ellipsis entrance_li_tit_span">{{children.name}}</span>
                      <span class="iconfont icon-shanchu" @click="deleteEntranceBtn('li', index, num)"></span>
                    </div>
                    <!--添加二级技能组-->
                    <div v-show="entrance.showAdd" class="add_entrance_todo_box entrance_li">
                      <el-input class="entrance_li_input" v-model="entrancesLiAdd" :maxlength="15" :placeholder="$t('configLazyLoad.process.processLabel84')"></el-input>
                      <span class="iconfont icon-fasongchenggong" @click="addEntranceSure('li', index)"></span>
                      <span class="iconfont icon-guanbi" @click="cancelAdd(index)"></span>
                    </div>
                  </div>
                  <!--添加一级技能组-->
                  <div v-show="addEntranceBox" class="add_entrance_todo_box entrance_li">
                    <el-input class="entrance_li_input" v-model="entrancesAdd" :maxlength="15"  :placeholder="$t('configLazyLoad.process.processLabel84')"></el-input>
                    <span class="iconfont icon-fasongchenggong" @click="addEntranceSure"></span>
                    <span class="iconfont icon-guanbi" @click="cancelAdd"></span>
                  </div>
                  <div class="add_entrance_li entrance_li" @click="addEntrance" v-show="showAddEntranceBtn">
                    {{$t('configLazyLoad.process.processLabel60')}}
                  </div>
                </div>
              </div>
            </el-col>
            <!--右侧设置每个技能组节点的流向-->
            <el-col :span="16">
              <div class="skil_trance_edit">
                <div v-if="nodeObj.entrances.length" v-for="(entrance, index) in nodeObj.entrances">
                  <div class="skil_trance" v-show="!entrance.children || entrance.children.length === 0">
                  <!--一级技能组-->
                    <el-row style="margin-top: 10px">
                      <el-col class="col_title" :span="6">
                        <div class="entrance_name_div">{{entrance.name}}</div>
                        <!--<div class="description">说明：</div>-->
                      </el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                      <el-col class="col_title" :span="6">
                        <div class="entrance_name_div">{{$t('configLazyLoad.process.processLabel70')}}</div>
                      </el-col>
                      <el-col :span="16">
                        <nodeSelect
                          :isObj="true"
                          :dataObj = "entrance"
                          @oneChange="onChange"
                          :index="''+ index"
                          onePath="processType"
                          :nodeType="entrance.processType"
                          @twoChange="onChange"
                          twoPath="processTo"
                          :transRoute="showTransRoute"
                          :transeExten="transeExten"
                          :contentId="nodeObj._id"
                          :nodeLi="entrance.processTo">
                        </nodeSelect>
                      </el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                      <el-col class="col_title" :span="6">
                        <div class="entrance_name_div">{{$t('configLazyLoad.process.processLabel85')}}</div>
                      </el-col>
                      <el-col :span="16">
                        <welcomeSelect
                          @changeOption="welcomeChange"
                          :index="''+ index"
                          :welcomeNodeId = 'entrance.welcomeNodeId'>
                        </welcomeSelect>
                      </el-col>
                    </el-row>
                    <el-row v-if="aiRobots.length > 0" style="margin-top: 10px">
                      <el-col class="col_title":span="6">
                        <div class="entrance_name_div">{{$t('configLazyLoad.process.processLabel86')}}</div>
                      </el-col>
                      <el-col :span="16">
                        <el-select size="mini" v-model.trim="entrance.robotAssistId" :placeholder="$t('public.pleasePick')" @visible-change="robotSelectShow">
                          <el-option value="">{{$t('public.pleasePick')}}</el-option>
                          <el-option
                            v-for="item in aiRobots"
                            :key="item._id"
                            :label="item.robot_type"
                            :disabled="item.disabled"
                            :value="item._id">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </div>
                  <!--二级技能组-->
                  <div class="skil_trance" v-for="(children, indexNum) in entrance.children">
                    <el-row style="margin-top: 10px">
                      <el-col class="col_title" :span="6">
                        <div class="entrance_name_div">{{entrance.name}}>{{children.name}}</div>
                        <!--<div class="description">说明：</div>-->
                      </el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                      <el-col class="col_title" :span="6">
                        <div class="entrance_name_div">{{$t('configLazyLoad.process.processLabel60')}}</div>
                      </el-col>
                      <el-col :span="16">
                        <nodeSelect
                          :isObj="true"
                          :dataObj = "children"
                          @oneChange="onChange"
                          onePath="processType"
                          :index="index + '_'+ indexNum"
                          :nodeType="children.processType"
                          @twoChange="onChange"
                          twoPath="processTo"
                          :transRoute="showTransRoute"
                          :transeExten="transeExten"
                          :contentId="nodeObj._id"
                          :nodeLi="children.processTo">
                        </nodeSelect>
                      </el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                      <el-col class="col_title" :span="6">
                        <div class="entrance_name_div">{{$t('configLazyLoad.process.processLabel70')}}</div>
                      </el-col>
                      <el-col :span="16">
                        <welcomeSelect
                          @changeOption="welcomeChange"
                          :index="index + '_'+ indexNum"
                          :welcomeNodeId = 'children.welcomeNodeId'>
                        </welcomeSelect>
                      </el-col>
                    </el-row>
                    <el-row v-if="aiRobots.length > 0" style="margin-top: 10px" >
                      <el-col class="col_title" :span="6">
                        <div class="entrance_name_div">{{$t('configLazyLoad.process.processLabel85')}}</div>
                      </el-col>
                      <el-col :span="16">
                        <el-select size="mini" v-model.trim="children.robotAssistId" :placeholder="$t('public.pleasePick')" @visible-change="robotSelectShow">
                          <el-option value="">{{$t('public.pleasePick')}}</el-option>
                          <el-option
                            v-for="item in aiRobots"
                            :key="item._id"
                            :label="item.robot_type"
                            :disabled="item.disabled"
                            :value="item._id">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
              <!--<el-input v-model="nodeObj.buttonStyle.text" @blur = "onlineTextBlur"></el-input>-->
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 移动app渠道入口设置 -->
      <el-row v-if="nodeObj.accessType === 'sdk'">
        <div class="remark">
          {{$t('configLazyLoad.process.processLabel87')}}
        </div>
        <el-col :span="18" class="skil_trance_edit">
          <el-row class="edit_head_title">
            <el-col class="col_title" :span="aiRobots.length > 0 ? 3 : 5">{{$t('configLazyLoad.process.processLabel88')}}</el-col>
            <el-col :span="aiRobots.length > 0 ? 9 : 11">{{$t('channelsettings.serviceNumber11')}}</el-col>
            <el-col :span="aiRobots.length > 0 ? 4 : 6">{{$t('configLazyLoad.process.processLabel92')}}</el-col>
            <el-col :span="6" v-if="aiRobots.length > 0">{{$t('configLazyLoad.process.processLabel93')}}</el-col>
            <el-col :span="1"><span class="el-icon-plus" @click="addOneSdk()"></span></el-col>
          </el-row>
          <!--<el-form :model="nodeObj" ref="nodeObjSdk">-->
            <el-form-item label-width="0px" v-for="(sdkEntrance, index) in nodeObj.entrances" :prop="'entrances.' + index + '.name'" :rules="{required: true, message: $t('configLazyLoad.intelligentQualityCheck.markError5'), trigger: 'blur'}">
              <el-row class="skil_trance">
                <el-col class="col_title" :span="aiRobots.length > 0 ? 3 : 5">
                  <el-input :maxlength="10" v-model="sdkEntrance.name" class="input_box" ></el-input>
                </el-col>
                <el-col :span="aiRobots.length > 0 ? 9 : 11">
                  <nodeSelect
                    :isObj="true"
                    :dataObj = "sdkEntrance"
                    @oneChange="onChange"
                    :index="''+ index"
                    onePath="processType"
                    :nodeType="sdkEntrance.processType"
                    @twoChange="onChange"
                    twoPath="processTo"
                    :transRoute="showTransRoute"
                    :transeExten="transeExten"
                    :contentId="nodeObj._id"
                    :nodeLi="sdkEntrance.processTo">
                  </nodeSelect>
                </el-col>
                <el-col :span="aiRobots.length > 0 ? 4 : 6">
                  <welcomeSelect
                    @changeOption="welcomeChange"
                    :index="''+ index"
                    :welcomeNodeId = 'sdkEntrance.welcomeNodeId'>
                  </welcomeSelect>
                </el-col>
                <el-col :span="6" v-if="aiRobots.length > 0">
                  <el-select size="mini" v-model.trim="sdkEntrance.robotAssistId" :placeholder="$t('public.pleasePick')" @visible-change="robotSelectShow">
                    <el-option value="">{{$t('public.pleasePick')}}</el-option>
                    <el-option
                      v-for="item in aiRobots"
                      :key="item._id"
                      :label="item.robot_type"
                      :disabled="item.disabled"
                      :value="item._id">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="1" class="addbtn">
                  <i class="el-icon-minus" @click="loseOneSdk(index)"></i>
                </el-col>
              </el-row>
            </el-form-item>
          <!--</el-form>-->
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
  import nodeSelect from '../../../base/webchatNodeSelect.vue'
  import welcomeSelect from '../../../base/webchatNodeSelectWel.vue'
  import { deepClone, initFinishName, updateOptions } from '@utils/m7Utils.js'

  export default{
    name: 'entranceNodeEdit',
    data () {
      return {
        nodeObj: {
          _id: '',
          createTime: '',
          createUser: '',
          updateTime: '',
          updateUser: '',
          nextNodeIds: [''],
          type: 'entrance',         // 节点类型
          name: '',                 // 节点名称
          accessType: '',           //  入口节点渠道类型
          keyWordTransfer: false,   //  是否启用多入口分流
          keyWordGuide: '',   //  多入口引导文案
          keyWords: [{
            keyWordValue: '',
            processType: 'system',
            processTo: 'finish'
          }],   //  关键词流转
          disTime: 30,   //  访客无响应结束会话时长
          disPromptCon: '',   //  断开提示文案
          buttonStyle: {
            text: this.$t('configLazyLoad.process.processLabel94'),
            icon: 'icon-webchat1',
            iconType: 1,
            location: 'bottom-right',
            sideMargin: '18',
            bottomMargin: '18',
            mobileBottomMargin: '18',
            mobileText: this.$t('configLazyLoad.process.processLabel94'),
            mobileIconType: 1,
            mobileLocation: 'bottom-right',
            mobileSideMargin: '18'
          },
          entrances: [],
          processType: 'system',
          processTo: 'finish',
          robotAssistId: '',
          autoCloseSessionType: '',    //  自动结束会话类型
          autoCloseSessionName: ''    //  自动结束会话类型
        },
        autoCloseOptions: [], //  自动结束会话类型数组
        transeExten: true,
        welcomeNodeId: '',
        isShowBtnText: true,
        radioSureChange: true,
        icons: ['icon-webchat1', 'icon-webchat', 'icon-webchat3', 'icon-webchat2', 'icon-webchat5', 'icon-webchat6', 'icon-webchat7', 'icon-webchat8', 'icon-webchat4', 'icon-webchat9', 'icon-webchat11', 'icon-webchat10'],
        btnOptions: [{                      //  在线咨询按钮位置列表
          label: this.$t('configLazyLoad.channel.bottomRightButton'),
          value: 'bottom-right'
        }, {
          label: this.$t('configLazyLoad.channel.bottomLeftButton'),
          value: 'bottom-left'
        }, {
          label: this.$t('configLazyLoad.channel.sideRightButton'),
          value: 'side-right'
        }, {
          label: this.$t('configLazyLoad.channel.sideLeftButton'),
          value: 'side-left'
        }, {
          label: this.$t('configLazyLoad.channel.circleRightButton'),
          value: 'circle-right'
        }, {
          label: this.$t('configLazyLoad.channel.circleLeftButton'),
          value: 'circle-left'
        }],
        mobileBtnOptions: [{
          label: this.$t('configLazyLoad.channel.circleRightButton'),
          value: 'circle-right'
        }, {
          label: this.$t('configLazyLoad.channel.circleLeftButton'),
          value: 'circle-left'
        }, {
          label: this.$t('configLazyLoad.channel.circleFloatButton'),
          value: 'levitate'
        }, {
          label: this.$t('configLazyLoad.channel.bottomButton'),
          value: 'bottom'
        }],
        optionsOne: [],
        endSessionOptions: [],
        activeFastOff: [],
        loseOptions: [],
        finishOptions: [],
        addEntranceBox: false,
        entrancesAdd: '',
        addEntranceLiBox: false,
        entrancesLiAdd: '',
        rules: {
          name: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel7'), trigger: 'blur' }
          ],
          accessType: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel95'), trigger: 'change' }
          ]
        },
        aiRobots: []
      }
    },
    props: {
      showDeleteBtn: {
        type: Boolean,
        default: true
      },
      dataId: {
        type: String,
        default: ''
      },
      random: Number,
      todoType: String
    },
    watch: {
      random (cur, old) {
        this.resetForm()
        this.radioSureChange = false
        this.initData()
      },
      nodeAccessType (cur) {
        if (cur !== 'common' && cur !== 'sdk') {
          this.transeExten = false
        } else {
          this.transeExten = true
        }
        if (this.radioSureChange && (cur === 'common' || cur === 'sdk')) {
          this.nodeObj.entrances = []
        }
      }
    },
    methods: {
      robotSelectShow (show) {
        if (show) {
          this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
            if (res2 && res2.success && res2.data && res2.data.length > 0) {
              let aiRobot = res2.data
              aiRobot.forEach((item1) => {
                item1._id = item1.Id
                item1.robot_type = item1.Nick
              })
              this.aiRobots = aiRobot
            }
          })
        }
      },
//      渠道类型发生变化的时候，需要重置数
//      微信&&微博两个渠道不支持流转到客户路由节点
      accessTypeChange (data) {
        let that = this
        if (that.nodeObj.accessType === 'weibo' || that.nodeObj.accessType === 'wechat') {
          if (that.nodeObj.processType === 'custRoute') {
            that.$set(that.nodeObj, 'processType', 'system')
            that.$set(that.nodeObj, 'processTo', 'finish')
          }
          that.nodeObj.keyWords.forEach((item) => {
            if (item.processType === 'custRoute') {
              that.$set(item, 'processType', 'system')
              that.$set(item, 'processTo', 'finish')
            }
          })
        }
      },
      onChange (data) {
        console.log(data)
        let arr = data.index.split('_')
        console.log(arr)
        if (arr.length === 1) {
          this.nodeObj.entrances[arr[0]] = data.value
        } else {
          this.nodeObj.entrances[arr[0]].children[arr[1]] = data.value
        }
      },
      welcomeChange (data) {
        if (typeof data === 'object') {
          let arr = data.index.split('_')
          if (arr.length === 1) {
            this.nodeObj.entrances[arr[0]].welcomeNodeId = data.value
          } else {
            this.nodeObj.entrances[arr[0]].children[arr[1]].welcomeNodeId = data.value
          }
        } else if (typeof data === 'string') {
          this.nodeObj.welcomeNodeId = data
        }
      },
//      微信渠道关键词一级流转
      wxSelectChangeOne (data) {
        this.nodeObj.keyWords[data.index].processType = data.value
      },
      //      微信渠道关键词二级流转
      wxSelectChangeTwo (data) {
        this.nodeObj.keyWords[data.index].processTo = data.value
      },
//      微信、微博、小程序流转到方法
      onChangeTwo (data) {
        this.nodeObj[data.path] = data.value
      },
      fastOffCloseFun (data) {
        if (data && data.length > 0) {
          let option = this.activeFastOff[this.activeFastOff.length - 1]
          if (option || option !== '') {
            let actName = option.split('__')[1]
            let finishKey = option.split('__')[0]
            this.nodeObj.autoCloseSessionName = actName
            this.nodeObj.autoCloseSessionType = finishKey
          }
        } else {
          this.nodeObj.autoCloseSessionName = ''
          this.nodeObj.autoCloseSessionType = ''
        }
      },
      initData () {
        this.radioSureChange = false
        if (this.dataId) {
          let data = {
            _id: this.dataId
          }
          this.$store.dispatch('getNodeById', data).then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                this.nodeObj = deepClone(res.data)
                if (this.nodeObj.keyWordTransfer === undefined) {
                  this.$set(this.nodeObj, 'keyWordTransfer', false)
                }
                if (this.nodeObj.keyWordGuide === undefined) {
                  this.$set(this.nodeObj, 'keyWordGuide', '')
                }
                if (this.nodeObj.keyWords === undefined) {
                  this.$set(this.nodeObj, 'keyWords', [{
                    keyWordValue: '',
                    processType: 'system',
                    processTo: 'finish'
                  }])
                }
                if (this.nodeObj.disTime === undefined) {
                  this.$set(this.nodeObj, 'disTime', 30)
                }
                if (this.nodeObj.disPromptCon === undefined) {
                  this.$set(this.nodeObj, 'disPromptCon', '')
                }
                if (this.nodeObj.buttonStyle.mobileBottomMargin === undefined) {
                  this.$set(this.nodeObj.buttonStyle, 'mobileBottomMargin', '18')
                }
                if (this.nodeObj.buttonStyle.mobileText === undefined) {
                  this.$set(this.nodeObj.buttonStyle, 'mobileText', this.$t('configLazyLoad.channel.consultAgent'))
                }
                if (this.nodeObj.buttonStyle.mobileIconType === undefined) {
                  this.$set(this.nodeObj.buttonStyle, 'mobileIconType', 1)
                }
                if (this.nodeObj.buttonStyle.mobileLocation === undefined) {
                  this.$set(this.nodeObj.buttonStyle, 'mobileLocation', 'bottom')
                }
                if (this.nodeObj.buttonStyle.mobileSideMargin === undefined) {
                  this.$set(this.nodeObj.buttonStyle, 'mobileSideMargin', '18')
                }
//                自动结束会话类别初始化
                // let beingFlag = true
                // this.autoCloseOptions.forEach((item) => {
                //   if (item.key === this.nodeObj.autoCloseSessionType) {
                //     beingFlag = false
                //   }
                // })
                if (this.nodeObj.autoCloseSessionType) {
                  this.finishOptions = initFinishName(this.closeOptions, {})
                  this.activeFastOff = [this.finishOptions[this.nodeObj.autoCloseSessionType]] || ''
                }
                if (this.nodeObj.accessType === 'wechat' || this.nodeObj.accessType === 'weibo' || this.nodeObj.accessType === 'wxmini' ) {
                  if (typeof this.nodeObj.welcomeNodeId !== 'string') {
                    this.nodeObj.welcomeNodeId = ''
                  }
                } else {
                  this.nodeObj.entrances.forEach((item) => {
                    if (typeof item.welcomeNodeId !== 'string') {
                      item.welcomeNodeId = ''
                    }
                    if (item.children) {
                      item.children.forEach((obj) => {
                        if (typeof obj.welcomeNodeId !== 'string') {
                          obj.welcomeNodeId = ''
                        }
                      })
                    }
                  })
                }
              })
            }
          })
        } else {
          this.radioSureChange = true
          this.activeFastOff = ''
          this.nodeObj = {
            _id: '',
            createTime: '',
            createUser: '',
            updateTime: '',
            updateUser: '',
            nextNodeIds: [''],
            type: 'entrance',
            name: '',
            accessType: 'common',
            keyWordTransfer: false,    //  是否启用多入口分流
            keyWordGuide: '',   //  多入口引导文案
            keyWords: [{
              keyWordValue: '',
              processType: 'system',
              processTo: 'finish'
            }],       //  关键词流转
            disTime: 30,   //  访客无响应结束会话时长
            disPromptCon: '',   //  断开时长
            buttonStyle: {
              text: this.$t('configLazyLoad.process.processLabel94'),
              icon: 'icon-webchat1',
              iconType: 1,
              location: 'bottom-right',
              sideMargin: '18',
              bottomMargin: '18',
              mobileBottomMargin: '18',
              mobileText: this.$t('configLazyLoad.channel.consultAgent'),
              mobileIconType: 1,
              mobileLocation: 'bottom',
              mobileSideMargin: '18'
            },
            entrances: [],
            processType: 'system',
            processTo: 'finish'
          }
        }
      },
      onlineTextBlur () {
        this.nodeObj.buttonStyle.text = this.nodeObj.buttonStyle.text ? this.nodeObj.buttonStyle.text : this.$t('configLazyLoad.channel.consultAgent')
      },
//      重置form
      resetForm () {
        this.$refs['nodeObj'].resetFields()
        this.nodeObj = {}
      },
      // 选择按钮图标的时候触发
      choseIcon (index) {
//        this.btnIcon = this.icons[index]
        this.nodeObj.buttonStyle.icon = this.icons[index]
        this.nodeObj.buttonStyle.iconType = index + 1
      },
      // 选择移动端按钮图标的时候触发
      choseMobileIcon (index) {
        this.nodeObj.buttonStyle.mobileIconType = index + 1
      },
      addEntrance (type, index) {
        if (this.addEntranceBox || this.addEntranceLiBox) {
          return
        }
        if (type === 'li') {
          this.nodeObj.entrances[index].showAdd = true
          this.addEntranceLiBox = true
        } else {
          this.addEntranceBox = true
        }
      },
      addEntranceSure (type, index) {
        if (type === 'li') {
          if (this.entrancesLiAdd) {
            this.nodeObj.entrances[index].children.push({
              name: this.entrancesLiAdd,
              processType: 'system',
              welcomeNodeId: '',
              processTo: 'finish'
            })
            this.cancelAdd(index)
            this.addEntranceLiBox = false
            this.entrancesLiAdd = ''
          } else {
            this.$message.error(this.$t('configLazyLoad.process.processLabel96'))
          }
        } else {
          if (this.entrancesAdd) {
            this.nodeObj.entrances.push({
              name: this.entrancesAdd,
              processType: 'system',
              processTo: 'finish',
              showAdd: false,
              welcomeNodeId: '',
              children: []
            })
            this.cancelAdd(index)
            this.addEntranceBox = false
            this.entrancesAdd = ''
          } else {
            this.$message.error(this.$t('configLazyLoad.process.processLabel96'))
          }
        }
      },
      cancelAdd (index) {
        if (typeof index === 'number') {
          this.nodeObj.entrances[index].showAdd = false
        }
        this.addEntranceBox = false
        this.addEntranceLiBox = false
        this.entrancesAdd = ''
        this.entrancesLiAdd = ''
      },
      deleteEntranceBtn (type, index, num) {
        if (type === 'li') {
          this.nodeObj.entrances[index].children.splice(num, 1)
        } else {
          this.nodeObj.entrances.splice(index, 1)
        }
        this.addEntranceBox = false
        this.addEntranceLiBox = false
      },
      blurMar (eleMargin) {
        if (eleMargin === 'btnSideMar' && ((this.nodeObj.buttonStyle.sideMargin <= 0 && this.nodeObj.buttonStyle.sideMargin + '' !== '0') || this.nodeObj.buttonStyle.sideMargin > 999)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip52'))
          this.nodeObj.buttonStyle.sideMargin = '18'
        } else if (eleMargin === 'btnBotMar' && ((this.nodeObj.buttonStyle.bottomMargin <= 0 && this.nodeObj.buttonStyle.bottomMargin + '' !== '0') || this.nodeObj.buttonStyle.bottomMargin > 500)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip53'))
          this.nodeObj.buttonStyle.bottomMargin = '18'
        }
      },
      saveEdit () {
        let that = this
        this.$refs['nodeObj'].validate((valid) => {
          if (valid) {
//            渠道入口至少添加一条
            if (that.nodeObj.entrances.length < 1 && (that.nodeObj.accessType === 'common' || that.nodeObj.accessType === 'sdk')) {
              that.$message.error(this.$t('configLazyLoad.process.processLabel97'))
              return
            } else if (that.nodeObj.accessType !== 'common' && that.nodeObj.accessType !== 'sdk' && !that.nodeObj.processType) {
//              微信、微博、小程序三个渠道，必须添加流转信息
              that.$message.error(this.$t('configLazyLoad.process.processLabel98'))
              return
            }
//            网站和app渠道会有多个流转，微信&&微博&&小程序只有一个流转，需要相互清空
            if (that.nodeObj.accessType !== 'common' && that.nodeObj.accessType !== 'sdk') {
              that.nodeObj.entrances = []
            } else {
              that.nodeObj.processType = ''
              that.nodeObj.processTo = ''
            }
//            访客无响应结束会话时长校验
            if (that.nodeObj.accessType !== 'common' && that.nodeObj.accessType !== 'sdk' && that.nodeObj.keyWordTransfer) {
              var regu = /^[0-9]*[1-9][0-9]*$/
              if (!regu.test(that.nodeObj.disTime)) {
                this.$message.error(this.$t('configLazyLoad.process.processLabel99'))
                return false
              }
            }
//            保存的时候，如果启用多入口分流，结束会话类别设定进行非空校验
            if (that.nodeObj.keyWordTransfer && !that.nodeObj.autoCloseSessionType && that.nodeObj.accessType !== 'common' && that.nodeObj.accessType !== 'sdk') {
              this.$message.error(this.$t('configLazyLoad.process.processLabel100'))
              return
            }
            if (that.nodeObj.autoCloseSessionType) {
              this.autoCloseOptions.forEach((item) => {
                if (item.key === this.nodeObj.autoCloseSessionType) {
                  that.$set(that.nodeObj, 'autoCloseSessionName', item.valName)
                }
              })
            }
//            添加节点
            for (var i = 0; i < that.aiRobots.length; i++) {
              if (that.nodeObj.entrances.length > 0) { // h5/网站
                for (var j = 0; j < that.nodeObj.entrances.length; j++) {
                  if (that.aiRobots[i]._id === that.nodeObj.entrances[j].robotAssistId) {
                    if (that.nodeObj.entrances[j].robotAssistId !== '') {
                      that.nodeObj.entrances[j].assistRobotType = that.aiRobots[i].robotType
                    } else {
                      that.nodeObj.entrances[j].assistRobotType = ''
                    }
                  }
                }
              } else { // 微博， 微信， 小程序
                if (that.aiRobots[i]._id === that.nodeObj.robotAssistId && that.nodeObj.robotAssistId) {
                  if (that.nodeObj.robotAssistId !== '') {
                    that.nodeObj.assistRobotType = that.aiRobots[i].robotType
                  } else {
                    that.nodeObj.assistRobotType = ''
                  }
                  break
                } else {
                  that.nodeObj.assistRobotType = ''
                }
              }
            }
            if (this.todoType === 'add') {
              that.$store.dispatch('addNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.ADD_WEBCHAT_SCHDULE_LIST_NODE, {node: 'entranceNode', data: that.nodeObj})
                  this.$message.success(this.$t('config.customer.addSucc'))
                  this.$emit('back')
                }
              })
            } else {
//              修改节点
              console.log(that.nodeObj)
              that.$store.dispatch('updateNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.UPDATE_WEBCHAT_SCHDULE_LIST_NODE, {node: 'entranceNode', data: that.nodeObj})
                  this.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                  this.$emit('back')
                }
              })
            }
          }
        })
      },
//      自动结束会话类别设定非空判断
      autoCloseChange () {
        if (this.autoCloseOptions.length === 0) {
          this.$message.error(this.$t('configLazyLoad.process.processLabel101'))
          this.form.autoCloseSession = '0'
        }
      },
      addOneSdk () {
        this.nodeObj.entrances.push({
          name: '',
          processType: 'system',
          processTo: 'finish'
        })
      },
      loseOneSdk (index) {
        this.nodeObj.entrances.splice(index, 1)
      },
      addKeyWords () {
        if (this.nodeObj.keyWords.length >= 10) {
          this.$message.error(this.$t('configLazyLoad.process.processLabel102'))
          return
        }
        this.nodeObj.keyWords.push({
          keyWordValue: '',
          processType: 'system',
          processTo: 'finish'
        })
      },
      deleteKeyWord (index) {
//        至少保留一个入口
        if (this.nodeObj.keyWords.length < 2) {
          this.$message.error(this.$t('configLazyLoad.process.processLabel103'))
          return
        }
        this.nodeObj.keyWords.splice(index, 1)
      },
      generateCloseSession (res) {
        let _dics = []
        for (let i = 0; i < res.length; i++) {
          if (res[i].type === 'webchat') {
            _dics = res[i].options || []
            this.closeOptions = _dics
            break
          }
        }
        if (_dics.length === 0) {
          return
        }
        updateOptions(_dics, {Arr: this.endSessionOptions})
        this.autoCloseOptions = this.endSessionOptions
      }
    },
    computed: {
      nodeAccessType () {
        return this.nodeObj.accessType
      },
//      微信和微博不可以流转到客户路由节点，微信小程序&&网站&&APP可以
      showTransRoute () {
        let flag = true
        if (this.nodeObj.accessType === 'weibo' || this.nodeObj.accessType === 'wechat') {
          flag = false
        }
        return flag
      },
      showAddEntranceBtn () {
        if (this.nodeObj.accessType === 'common') {
          return true
        } else if (this.nodeObj.accessType !== 'common' && this.nodeObj.entrances.length < 1) {
          return true
        } else {
          return false
        }
      },
      place () {
        let address = this.nodeObj.buttonStyle.location
        return address.includes('bottom') ? 'bottom' : address.includes('side') ? 'side' : 'circle'
      },
      // 判断按钮是否超出可视框
      showBtn () {
        var btnSideMar = document.getElementsByClassName('bottom_btn')[0]
        var btnBotMar = document.getElementsByClassName('side_btn')[0]
        if (!btnSideMar || !btnBotMar) {
          return true
        }
        if (this.place === 'bottom' && 420 - btnSideMar.clientWidth > this.nodeObj.buttonStyle.sideMargin) {
          return true
        } else if (this.place === 'side' && 500 - btnBotMar.clientHeight > this.nodeObj.buttonStyle.bottomMargin) {
          return true
        } else if (this.place === 'circle' && 470 - 0 > this.nodeObj.buttonStyle.bottomMargin && 390 - 0 > this.nodeObj.buttonStyle.sideMargin) {
          return true
        }
        return false
      },
      // 计算按钮的样式
      btnStyle () {
        let btnStyle1 = {}
        let posit = this.nodeObj.buttonStyle.location.split('-')
        this.isShowBtnText = true
        if (posit[0] === 'bottom') {
          btnStyle1[posit[1]] = this.nodeObj.buttonStyle.sideMargin + 'px'
        } else if (posit[0] === 'side') {
          btnStyle1[posit[1]] = 0
          btnStyle1['bottom'] = this.nodeObj.buttonStyle.bottomMargin + 'px'
          if (posit[1] === 'left') {
            btnStyle1.borderRadius = '0 3px 3px 0'
          } else {
            btnStyle1.borderRadius = '3px 0 0 3px'
          }
        } else {
          btnStyle1[posit[1]] = this.nodeObj.buttonStyle.sideMargin + 'px'
          btnStyle1['bottom'] = this.nodeObj.buttonStyle.bottomMargin + 'px'
//          btnStyle1.background = 'none'
          this.isShowBtnText = false
        }
        return btnStyle1
      }
    },
    components: {
      affix,
      welcomeSelect,
      nodeSelect
    },
    beforeMount () {
      let p1 = this.$store.dispatch('getCache', {type: 'channelDic'})
      let p2 = this.$store.dispatch('queryM7AIRobot', {})
      Promise.all([p1, p2]).then(([res1, res2]) => {
        this.generateCloseSession(res1)
        if (res2 && res2.success && res2.data && res2.data.length > 0) {
          let aiRobot = res2.data
          aiRobot.forEach((item1) => {
            item1._id = item1.Id
            item1.robot_type = item1.Nick
          })
          this.aiRobots = aiRobot
        }
        this.initData()
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../../assets/common.styl"
  .btn_box
    text-align right
    margin-bottom 10px
  .delete_btn
    background-color #ff6b6b
    border-color #ff6b6b
  .form_li
    width 800px
    font-size 12px
    position relative
  .entrance_node_edit
    padding 10px
  .switch_btn
    display inline-block
  .ui-affix
    padding 18px 20px 0 20px
  .switch_box
    padding-left 20px
    .switch_box_text
      margin-left 10px
  .config
    .chat_box
      width 240px
      span
        display inline-block
        width 26px
        height 26px
        border-radius 3px
        margin-left 16px
        position relative
        cursor pointer
        span
          position absolute
          top 4px
          left 5px
          color $cf-white
          font-size 16px
      :nth-child(1)
        margin-left 0
      :nth-child(7)
        margin-left 0
        margin-top 12px
      :nth-child(8)
        margin-top 12px
    .btnSty
      width 240px
      span
        display inline-block
        width 26px
        height 26px
        background $cf-level4
        text-align center
        line-height 26px
        margin-left 16px
        color $cf-white
        margin-bottom 12px
        cursor pointer
      :nth-child(1)
        margin-left 0
      :nth-child(7)
        margin-left 0
      .span-back
        background $c-main
  .config
    margin-top 10px
  .entrance_show
    width 300px
    box-shadow 0 0 10px #888
    .head
      background $c-main
      height 50px
      color #fff
      line-height 50px
      text-align center
    .body
      background #F9F9F9
      padding 16px
      font-size 14px
      .leave_msg_title
        line-height 20px
        height 20px
        margin-bottom 6px
      .leave_msg_content
        height 60px
  .icon-shanchu,.icon-guanbi
    color $c-pink
    margin 0 10px
  .icon-zhankai,.icon-fasongchenggong
    color $c-main
    margin 0 10px
  .entrance_li_btn
    font-size 14px
    .entrance_li_title
      height 30px
      .iconfont
        display none
    .entrance_li_title
      &:hover
        .iconfont
          display inline-block
        .entrance_li_tit_span
          width 60%
          float left
      .entrance_li_tit_span
        width 100%
        display inline-block
  .iconfont
    cursor pointer
  .skil_trance_edit
    background #f6f6f6
    padding 10px
  .edit_head_title
    font-weight bold
    .el-icon-plus
      cursor pointer
      color $c-main
  .entrance_name_div
    text-align center
    line-height 30px
  .description
    text-align right
    line-height 30px
  .entrance_li
    margin 10px 0
    background #E6E6E6
    line-height 30px
    text-align center
    border-radius: 6px;
  .col_title
    margin-right 3%
  .add_entrance_li
    border 1px dashed #bfbfbf
    background #fff
    cursor pointer
  .entrance_li_input
    width 70%
    display inline-block
  .skil_trance
    border-top 1px solid #ccc
    margin-top 10px
    padding-top 10px
  .box
    width 420px
    height 500px
    border 1px solid $c-border2
    position relative
    overflow hidden
    .show
      width 250px
      height 300px
      position absolute
      bottom 60px
      .header
        height 50px
        .fll
          width 100px
          margin 6px 0 0 70px
          display inline-block
          text-align center
          img
            width 20px
            height 20px
          p
            color $cf-white
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
        div.fr
          margin 16px 6px 0 0
          span
            font-size 12px
            margin-left 12px
            color $cf-white
      .content
        height 160px
        font-size 12px
        padding 0 12px
        border-bottom 1px solid $c-border2
        :nth-child(1)
          margin-top 12px
        .fl
          height 30px
          background $c-border2
          line-height 30px
          padding 0 6px
          border-radius 4px
          position relative
        .fl:before
          display block
          content ""
          width 0
          height 0
          border-right 5px solid $c-border2
          border-top 4px solid transparent
          border-bottom 4px solid transparent
          position absolute
          left -5px
          top 10px
        .fr
          height 30px
          line-height 30px
          padding 0 6px
          border-radius 4px
          position relative
          margin-top 12px
          span
            display block
            width 0
            height 0
            border-top 4px solid transparent
            border-bottom 4px solid transparent
            position absolute
            right -5px
      .footer
        height 76px
        .iconfont
          font-size 20px
          color $cf-level3
          margin 4px 0 0 6px
          display block
        .comit
          width 40px
          height 16px
          font-size 12px
          color $cf-white
          line-height 16px
          text-align center
          border-radius 4px
          display block
          float right
          margin 30px 6px 0 0
    .kf
      position absolute
      color $cf-white
      background $c-main
    .bottom_btn
      height 36px
      line-height 36px
      bottom 0
      padding 0 10px
      border-radius 4px 4px 0 0
      :nth-child(2)
        margin-left 6px
    .side_btn
      width 27px
      bottom 18px
      padding 10px 6px
      .iconfont
        margin-left 4px
      :nth-child(2)
        display inline-block
        width 12px
        padding 0 6px
        margin-top 6px
    .circle_btn
      background none
      .iconfont
        background $c-main
        display block
        width 28px
        height 28px
        color $cf-white
        text-align center
        line-height 28px
        border-radius 50%
  .webchat_entrance_group,.webchat_btn_css
    padding-left 20px
    margin-top 20px
  .webchat_entrance_group
    margin-top 40px
  .trance_select
    width 40%
  .start_input
    position relative
    margin-right 24px
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 16px
      position absolute
      top 15px
      right -20px
  .node_accessType_box
    span
      font-size 12px
  .remark
    color #3b5998
    margin-bottom 10px
  .addbtn
    text-align center
    color $c-main
    i
      cursor pointer
  .input_time_box
    width 100px
    margin-right 10px
  .add_btn
    border 1px solid #459ae9
    color #459ae9
    border-radius 6px
    display inline-block
    padding 4px
    margin 0 10px 0 24px
    cursor pointer
    .iconfont
      font-size 12px
      margin 0 6px 0 2px
  .key_word_li_input
    width calc(100% - 16px)
  .key_word_delete_btn
    color #ff6b6b
    font-size 12px
    cursor pointer
  .font_small
    font-size 12px
  .prompit
    color $c-prompt
    font-size 12px
  .key_words_box
    background #f4f4f4
    padding 10px 0
  .el_form_key_words
    .key_words_item
      display inline-block
      width 49%
      margin-bottom 10px
  .example_tip
    font-size 12px
    position absolute
    right -40px
    top 18px
    color #3b5998
    cursor pointer
</style>
